<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01canvas画一条直线</title>
    <style>
        canvas{
            border:1px solid #ccc;
            /*不建议在样式设置尺寸*/
            /*因为会造成里面图片变形及画布拉伸 在css中设置width和height是设置canvas的样式，不是canvas画布大小*/
        }
    </style>
</head>
<body>
<!--1.准备画布-->
<!--1.1画布为白色，且默认为为300*150 画布大小一般在canvas元素本身进行设置 -->
<canvas width="600"height="400"></canvas>
<!--2.准备绘制工具-->
<!--3.利用工具绘图-->
<script>
    /*1.获取元素*/
    var myCanvas =document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱*/
    var ctx=myCanvas.getContext('2d');
    /*3.移动画笔*/
    ctx.moveTo(100.5,100.5);
    /*4.绘制一条直线（轨迹，绘制路径）*/
    ctx.lineTo(100.5,200.5);
    /*5.描边*/
    ctx.stroke();
</script>
</body>
</html>
